<template>
  <div
    :class="
      Daside.aside.settings.isSettingsHide
        ? 'settings settingsHide'
        : 'settings'
    "
  >
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ $t("aside.settings.default") }}</span>
          <el-icon @click="Daside.settingsDisplay()"
            ><IEpCloseBold></IEpCloseBold
          ></el-icon>
        </div>
      </template>
      <div class="card-body">
        <el-switch
          v-model="Daside.aside.settings.isSunnyMode"
          inline-prompt
          size="large"
          :active-icon="Sunny"
          :inactive-icon="Moon"
          active-color="#bbb"
          inactive-color="#666"
          @click="toggle()"
        />
        <div class="mode">
          <el-divider content-position="right"
            >{{ $t("aside.settings.modeSwitching.default") }}
            <el-tooltip effect="dark" placement="bottom"
              ><template #content>{{
                $t("aside.settings.modeSwitching.tip")
              }}</template
              ><el-icon> <IEpWarning></IEpWarning></el-icon></el-tooltip
          ></el-divider>
          <ul>
            <li>
              <el-tooltip effect="dark" placement="bottom"
                ><template #content>{{
                  $t("aside.settings.modeSwitching.mode1")
                }}</template>
                <div
                  :class="
                    Daside.aside.settings.mode == 1 ? 'mode1 active' : 'mode1'
                  "
                  @click="Daside.settingsModeSwitch(1)"
                >
                  <el-container
                    ><el-aside></el-aside> <el-main></el-main
                  ></el-container>
                </div>
              </el-tooltip>
            </li>
            <li>
              <el-tooltip effect="dark" placement="bottom">
                <template #content>{{
                  $t("aside.settings.modeSwitching.mode2")
                }}</template>
                <div
                  :class="
                    Daside.aside.settings.mode == 2 ? 'mode2 active' : 'mode2'
                  "
                  @click="Daside.settingsModeSwitch(2)"
                >
                  <el-container
                    ><el-header></el-header> <el-main></el-main
                  ></el-container></div
              ></el-tooltip>
            </li>
            <li>
              <el-tooltip effect="dark" placement="bottom"
                ><template #content>{{
                  $t("aside.settings.modeSwitching.mode3")
                }}</template>
                <div
                  :class="
                    Daside.aside.settings.mode == 3 ? 'mode3 active' : 'mode3'
                  "
                  @click="Daside.settingsModeSwitch(3)"
                >
                  <el-container>
                    <el-main></el-main><el-footer></el-footer
                  ></el-container></div
              ></el-tooltip>
            </li>
          </ul>
        </div>
        <div class="theme">
          <el-divider content-position="right">{{
            $t("aside.settings.theme.default")
          }}</el-divider>
          <span>{{ $t("aside.settings.theme.themeColor") }}</span>
          <div class="themecolor">
            <ul>
              <li
                v-for="(item, index) in Daside.aside.settings.colors"
                :key="item"
                @click="Daside.settingsSetThemeColor(index, item)"
              >
                <div :style="{ background: item }">
                  <el-icon
                    v-show="index == Daside.aside.settings.themeColor"
                    :size="15"
                    ><IEpCheck></IEpCheck
                  ></el-icon>
                </div>
              </li>
            </ul>
          </div>
          <div class="greymode">
            <span>{{ $t("aside.settings.theme.greyMode") }}</span>
            <el-switch
              v-model="Daside.aside.settings.isGreyMode"
              inline-prompt
              size="large"
              :active-text="Dheader.header.row1.isLanguageSwitch ? '开' : 'Y'"
              :inactive-text="Dheader.header.row1.isLanguageSwitch ? '关' : 'N'"
            />
          </div>
        </div>
        <div class="tabs">
          <el-divider content-position="right">{{
            $t("aside.settings.tabs.default")
          }}</el-divider>
          <ul>
            <li>
              <span>{{ $t("aside.settings.tabs.tabBar") }}</span>
              <div>
                <el-switch
                  v-model="Dheader.header.row2.isRow2Display"
                  size="large"
                  inline-prompt
                  :active-text="
                    Dheader.header.row1.isLanguageSwitch ? '显示' : 'Y'
                  "
                  :inactive-text="
                    Dheader.header.row1.isLanguageSwitch ? '隐藏' : 'N'
                  "
                />
              </div>
            </li>
            <li>
              <span
                >{{ $t("aside.settings.tabs.tabStyle")
                }}<el-tooltip effect="dark" placement="bottom"
                  ><template #content>{{
                    $t("aside.settings.tabs.tip")
                  }}</template
                  ><el-icon> <IEpWarning></IEpWarning></el-icon></el-tooltip
              ></span>
              <div>
                <el-select
                  v-model="settingsSelectTabClass"
                  :placeholder="
                    Dheader.header.row1.isLanguageSwitch ? '请选择' : 'select'
                  "
                  :disabled="!Dheader.header.row2.isRow2Display"
                >
                  <template #empty>{{
                    Dheader.header.row1.isLanguageSwitch
                      ? "没有匹配的数据"
                      : "No matching data"
                  }}</template>
                  <el-option
                    v-for="item in Daside.aside.settings.tabOptions"
                    :key="item.value"
                    :value="item.value"
                    :disabled="item.disabled"
                    >{{ $t(item.value) }}</el-option
                  >
                </el-select>
              </div>
            </li>
            <li>
              <span
                >{{ $t("aside.settings.tabs.tabIcon")
                }}<el-tooltip effect="dark" placement="bottom"
                  ><template #content>{{
                    $t("aside.settings.tabs.tip")
                  }}</template
                  ><el-icon> <IEpWarning></IEpWarning></el-icon></el-tooltip
              ></span>
              <div>
                <el-switch
                  v-model="Daside.aside.settings.isTabIconDisplay"
                  size="large"
                  inline-prompt
                  :active-text="
                    Dheader.header.row1.isLanguageSwitch ? '显示' : 'Y'
                  "
                  :inactive-text="
                    Dheader.header.row1.isLanguageSwitch ? '隐藏' : 'N'
                  "
                  :disabled="!Dheader.header.row2.isRow2Display"
                />
              </div>
            </li>
          </ul>
        </div>
        <div class="others">
          <el-divider content-position="right">{{
            $t("aside.settings.others.default")
          }}</el-divider>
          <ul>
            <li>
              <span>
                {{ $t("aside.settings.others.smallMenu") }}
                <el-tooltip effect="dark" placement="bottom"
                  ><template #content>{{
                    $t("aside.settings.tabs.tip2")
                  }}</template
                  ><el-icon> <IEpWarning></IEpWarning></el-icon></el-tooltip
              ></span>
              <div>
                <el-switch
                  v-model="Daside.aside.settings.isSmallMenuState"
                  size="large"
                  inline-prompt
                  :active-text="
                    Dheader.header.row1.isLanguageSwitch ? '常驻' : 'Y'
                  "
                  :inactive-text="
                    Dheader.header.row1.isLanguageSwitch ? '默认' : 'N'
                  "
                />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  // name: "Settings",
};
</script>
<script lang="ts" setup>
import { useDaside } from "../../store/Daside";
import { useDheader } from "../../store/Dheader";
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const Daside = useDaside();
const Dheader = useDheader();

const isDark = useDark({
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: "useDarkKEY",
  storage: sessionStorage,
  // 暗黑class名字
  valueDark: "dark",
  // 高亮class名字
  valueLight: "light",
});

const toggle = useToggle(isDark);
//监听夜间模式变化
watch(
  () => Daside.settingsGetSunnyMode,
  (oldValue, newValue) => {
    newValue.value
      ? ElMessage({
          type: "success",
          message: "日间模式",
          duration: 500,
        })
      : ElMessage({
          type: "success",
          message: "夜间模式",
          duration: 500,
        });
  }
);

const settingsSelectTabClass = computed({
  get: () => {
    return t(Daside.aside.settings.tabClass);
  },
  set: (val) => {
    Daside.aside.settings.tabClass = val;
  },
});
</script>

<style lang="scss" scoped>
.settings {
  transition: all 0.66s ease;
  position: absolute;
  width: 300px;
  height: 100%;
  right: 0px;
  z-index: 10001;
  &.settingsHide {
    right: -300px;
  }
}
.box-card {
  width: 100%;
  font-size: 14px;
  height: 100vh;
  overflow-y: scroll;
  //隐藏滚动条
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  } //隐藏滚动条

  .card-header {
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-body {
    height: fit-content;

    .mode {
      ul {
        display: flex;
        list-style: none;
        li {
          width: 33%;
          height: 80px;
        }
        .mode1 {
          margin-left: 10px;
          width: 70px;
          height: 50px;
          border-radius: 5px;
          border-style: solid;
          border-width: 1px 1px 1px 0px;
          border-color: rgb(228, 228, 228);

          .el-aside {
            width: 15px;
            height: 50px;
            background-color: #000;
            border-radius: 5px 0px 0px 5px;
          }

          .el-main {
            width: 55px;
            height: 50px;
            background-color: rgb(255, 255, 255);
            border-radius: 0px 5px 5px 0px;
          }
        }

        .mode2 {
          margin-left: 10px;
          width: 70px;
          height: 50px;
          border-radius: 5px;
          border: 1px solid rgb(228, 228, 228);
          .el-header {
            width: 70px;
            height: 10px;
            background-color: #000;
            border-radius: 5px 5px 0px 0px;
          }
          .el-main {
            width: 70px;
            height: 40px;
            background-color: rgb(255, 255, 255);
            border-radius: 0px 0px 5px 5px;
          }
        }
        .mode3 {
          margin-left: 10px;
          width: 70px;
          height: 50px;
          border-radius: 5px;
          border: 1px solid rgb(228, 228, 228);

          .el-main {
            width: 70px;
            height: 40px;
            background-color: rgb(255, 255, 255);
            border-radius: 5px 5px 0px 0px;
          }
          .el-footer {
            width: 70px;
            height: 10px;
            background-color: #000;
            border-radius: 0px 0px 5px 5px;
          }
        }
        .active {
          box-shadow: 0px 0px 3px var(--theme-color);
        }
      }
    }

    .theme {
      .themecolor {
        ul {
          display: flex;
          list-style: none;
          li {
            flex: 1;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;

            div {
              width: 20px;
              height: 20px;
              border-radius: 2px;
              border: 1px solid rgb(204, 204, 204);
              .el-icon {
                color: #fff;
              }
            }
            &:first-child {
              div {
                background-color: #fff !important;
                .el-icon {
                  color: #000;
                }
              }
            }
          }
        }
      }
      .greymode {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          width: 45%;
          display: flex;
          align-items: center;
          justify-content: start;
        }
        div {
          display: flex;
          flex-grow: 1;
          justify-content: end;
        }
      }
    }

    .tabs {
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          width: 45%;
          display: flex;
          align-items: center;
          justify-content: start;
        }
        div {
          display: flex;
          flex-grow: 1;
          justify-content: end;
        }
      }
    }
    .others {
      li {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          width: 45%;
          display: flex;
          align-items: center;
          justify-content: start;
        }
        div {
          display: flex;
          flex-grow: 1;
          justify-content: end;
        }
      }
    }
  }
}
</style>
